Vue.component("rankingq",{
    template: `
    <el-card style="height: 100%">
        <div slot="header" class="flex">
            <span>今日最热题目排行</span>
        </div>
        <el-card class="hsc" v-for="(item, index) in fivequestion"><el-link @click="open(item)" :underline="false">{{index + 1}}.{{truncatedContent(index)}}</el-link></el-card>
        <style scoped>
        .flex{
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 100%;
        gap: 10px;
    }
    .flex>*{
        margin: 0px;
        padding: 0px;
    }
    .hsc:hover{
        transform: scale(1.1);
        box-shadow: 3px 3px 3px 3px #8888;
    }
        </style>
        <el-dialog title="题目详情" :visible.sync="qus">
        <!--        题目显示-->
        <div v-if="one.type == '填空题'">
            {{one.content}}
            <br/><br/>
            <img v-if="one.image != null && one.image?.trim() !== ''" style="width: 200px;height: 200px" :src="one.image">
            <br/><br/>
        </div>
        <div v-if="one.type == '单选题' || one.type == '多选题'">
            {{one.content}}
            <br/><br/>
            <img v-if="one.image != null && one.image?.trim() !== ''" style="width: 200px;height: 200px" :src="one.image">
            <ol type="A">
                <li v-for="a in one.items.split(';')"><input type="checkbox" disabled>{{a.replace(/^\\$/, '')}}</li>
            </ol>
        </div>
        <div v-if="one.type == '判断题'">
            {{one.content}}
            <br/><br/>
            <img v-if="one.image != null && one.image?.trim() !== ''" style="width: 200px;height: 200px" :src="one.image">
            <ol type="A">
                <li><input type="checkbox" disabled >对</li>
                <li><input type="checkbox" disabled >错</li>
            </ol>
        </div>
        <div v-if="one.type == '问答题'">
            {{one.content}}
            <br/><br/>
            <img v-if="one.image != null && one.image?.trim() !== ''" style="width: 200px;height: 200px" :src="one.image">
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button @click="qus = false">取 消</el-button>
        </div>
    </el-dialog>
    </el-card>
    `,
    data(){
        return{
            fivequestion:[],
            qus: false,
            one: {}
        }
    },
    methods:{
        //查询最新放映的5部电影信息
        getFiveQuestion(){
            axios.get("doquestion/getFiveQuestion").then(res=>{
                if(res.data.code === 1){
                    this.fivequestion = res.data.data;
                }
            });
        },
        truncatedContent(index) {
            const maxLength = 30; // 设置最大显示字符数
            const content = this.processedQuestions[index].content;
            if (content.length > maxLength) {
                return content.substring(0, maxLength) + '...';
            }
            return content;
        },
        open(obj){
            this.one = obj;
            this.qus = true;
        },
    },
    created(){
        this.getFiveQuestion();
    },
    computed: {
        processedQuestions() {
            // 这里可以添加任何处理逻辑，但在这个例子中我们直接返回 fivequestion
            return this.fivequestion;
        },
        // 计算属性来格式化正确答案
        formattedCorrectAnswers() {
            if (!this.one.items) return ''; // 如果没有items，则返回空字符串
            const answers = this.one.items.split(';'); // 使用分号分割字符串
            if (answers.length === 1) {
                // 如果只有一个答案，直接返回
                return answers[0];
            } else {
                // 如果有多个答案，将分号替换为、并返回
                return answers.join('、');
            }
        }
    }
});